{{define "content"}}
<div class="row mb-4">
    <div class="col">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Challenges</a></li>
                <li class="breadcrumb-item active">Profile: {{.Username}}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-person-circle"></i> {{.Username}}'s Profile
                </h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <img src="https://github.com/{{.Username}}.png" alt="{{.Username}}" 
                         class="rounded-circle me-3" style="width: 80px; height: 80px; object-fit: cover;">
                    <div>
                        <h5 class="mb-1">{{.Username}}</h5>
                        <a href="https://github.com/{{.Username}}" target="_blank" class="text-decoration-none">
                            <i class="bi bi-github"></i> GitHub Profile
                        </a>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted">Repository synchronization:</span>
                    <button id="refresh-btn" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-arrow-clockwise"></i> Sync with Repo
                    </button>
                </div>
                
                <div class="progress mb-3" style="height: 25px;">
                    <div class="progress-bar bg-success" 
                         role="progressbar" 
                         style="width: {{if eq (len .Challenges) 0}}0{{else}}{{multiply (divide .Progress.TotalSolved (len .Challenges)) 100}}{{end}}%;" 
                         aria-valuenow="{{.Progress.TotalSolved}}" 
                         aria-valuemin="0" 
                         aria-valuemax="{{len .Challenges}}">
                        {{.Progress.TotalSolved}}/{{len .Challenges}} Challenges Completed
                    </div>
                </div>
                
                <div class="row text-center mt-4">
                    <div class="col-4">
                        <div class="p-3 border rounded mb-2">
                            <h3 class="mb-0">{{.Progress.TotalSolved}}</h3>
                        </div>
                        <span class="text-muted">Solved</span>
                    </div>
                    <div class="col-4">
                        <div class="p-3 border rounded mb-2">
                            <h3 class="mb-0">{{countByDifficulty .SolvedChallenges .Challenges "Beginner"}}</h3>
                        </div>
                        <span class="text-success">Beginner</span>
                    </div>
                    <div class="col-4">
                        <div class="p-3 border rounded mb-2">
                            <h3 class="mb-0">{{countByDifficulty .SolvedChallenges .Challenges "Advanced"}}</h3>
                        </div>
                        <span class="text-danger">Advanced</span>
                    </div>
                </div>
                
                {{if .Progress.GitUrl}}
                <div class="mt-3">
                    <a href="{{.Progress.GitUrl}}" target="_blank" class="btn btn-outline-primary d-block">
                        <i class="bi bi-git"></i> View Git Repository
                    </a>
                </div>
                {{end}}
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h5 class="mb-0">Challenge Progress</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Challenge</th>
                                <th>Difficulty</th>
                                <th>Status</th>
                                <th>Last Attempt</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{range $id, $challenge := .Challenges}}
                            <tr class="{{if index $.Progress.Submissions $id}}table-success{{end}}">
                                <td>{{$id}}</td>
                                <td>{{$challenge.Title}}</td>
                                <td>
                                    <span class="badge rounded-pill bg-{{if eq $challenge.Difficulty "Beginner"}}success{{else if eq $challenge.Difficulty "Intermediate"}}warning{{else}}danger{{end}}">
                                        {{$challenge.Difficulty}}
                                    </span>
                                </td>
                                <td>
                                    {{if index $.Progress.Submissions $id}}
                                    <span class="badge bg-success">Completed</span>
                                    {{else if index $.Progress.LastSubmitted $id}}
                                    <span class="badge bg-warning text-dark">Attempted</span>
                                    {{else}}
                                    <span class="badge bg-secondary">Not Started</span>
                                    {{end}}
                                </td>
                                <td>
                                    {{if index $.Progress.LastSubmitted $id}}
                                    {{formatTime (index $.Progress.LastSubmitted $id)}}
                                    {{else}}
                                    -
                                    {{end}}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="/challenge/{{$id}}" class="btn btn-outline-primary">
                                            {{if index $.Progress.Submissions $id}}
                                            Review
                                            {{else}}
                                            Start
                                            {{end}}
                                        </a>
                                        {{if index $.Progress.Submissions $id}}
                                        <a href="/scoreboard/{{$id}}" class="btn btn-outline-success">Scoreboard</a>
                                        {{end}}
                                    </div>
                                </td>
                            </tr>
                            {{end}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0">Recent Submissions</h5>
            </div>
            <div class="card-body p-0">
                {{if .Submissions}}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Challenge</th>
                                <th>Submitted</th>
                                <th>Status</th>
                                <th>Execution Time</th>
                                <th>Git</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{range .Submissions}}
                            <tr>
                                <td>
                                    <a href="/challenge/{{.ChallengeID}}">
                                        Challenge {{.ChallengeID}}: {{index $.Challenges .ChallengeID | title}}
                                    </a>
                                </td>
                                <td>{{.SubmittedAt | formatDate}}</td>
                                <td>
                                    {{if .Passed}}
                                    <span class="badge bg-success">Passed</span>
                                    {{else}}
                                    <span class="badge bg-danger">Failed</span>
                                    {{end}}
                                </td>
                                <td>{{.ExecutionMs}}ms</td>
                                <td>
                                    {{if .GitSubmitted}}
                                    <a href="{{.GitUrl}}" target="_blank" class="btn btn-sm btn-outline-dark">
                                        <i class="bi bi-git"></i>
                                    </a>
                                    {{else}}
                                    -
                                    {{end}}
                                </td>
                            </tr>
                            {{end}}
                        </tbody>
                    </table>
                </div>
                {{else}}
                <div class="p-4 text-center">
                    <p class="text-muted">No submissions yet.</p>
                </div>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle refresh button
        const refreshBtn = document.getElementById('refresh-btn');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', function() {
                // Disable button and show loading state
                refreshBtn.disabled = true;
                refreshBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Syncing...';
                
                // Call API to refresh submissions from repository
                fetch('/api/refresh', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    // Show success message
                    alert(`Successfully synchronized with repository! Found ${data.count} submissions.`);
                    // Reload the page to show updated data
                    window.location.reload();
                })
                .catch(error => {
                    // Show error message
                    alert('Failed to synchronize with repository: ' + error.message);
                    
                    // Reset button
                    refreshBtn.disabled = false;
                    refreshBtn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Sync with Repo';
                });
            });
        }
    });
</script>
{{end}} 